<!DOCTYPE html>
<html>
<head>
    <title>{{ table_name }} 表结构管理</title>
    <link href="/Style/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/Style/css/bootstrap-icons.css">
    <style>
        body {
            padding: 2rem;
            background-color: #f8f9fa;
        }
        .section-card {
            margin-bottom: 1.5rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1><i class="bi bi-gear me-2"></i>{{ table_name }} 表结构管理</h1>
            <div>
                <a href="{{ url_for('sqlmanager_bp.index_sql_page') }}" class="btn btn-outline-secondary me-2">
                    <i class="bi bi-arrow-left me-1"></i> 返回表列表
                </a>
                <a href="{{ url_for('sqlmanager_bp.table_view', table_name=table_name) }}" class="btn btn-outline-primary">
                    <i class="bi bi-table me-1"></i> 查看数据
                </a>
            </div>
        </div>

        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <!-- 字段列表 -->
        <div class="card section-card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-columns me-2"></i>字段列表</h5>
                <button type="button" class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#addColumnModal">
                    <i class="bi bi-plus-circle me-1"></i> 添加字段
                </button>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>字段名</th>
                                <th>数据类型</th>
                                <th>主键</th>
                                <th>可为空</th>
                                <th>索引</th>
                                <th>外键</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for column in details.columns %}
                            <tr>
                                <td>{{ column.name }}</td>
                                <td>{{ column.type_str }}</td>
                                <td>{{ '是' if column.is_primary else '否' }}</td>
                                <td>{{ '是' if column.nullable else '否' }}</td>
                                <td>{{ '是' if column.indexes else '否' }}</td>
                                <td>{{ '是' if column.foreign_keys else '否' }}</td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-outline-primary"
                                            data-bs-toggle="modal"
                                            data-bs-target="#modifyColumnModal"
                                            data-column-name="{{ column.name }}"
                                            data-column-type="{{ column.type_str }}"
                                            data-nullable="{{ column.nullable }}">
                                        <i class="bi bi-pencil me-1"></i> 修改
                                    </button>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 主键信息 -->
        <div class="card section-card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-key me-2"></i>主键信息</h5>
            </div>
            <div class="card-body">
                <p>主键字段: {{ details.primary_keys.constrained_columns|join(', ') }}</p>
            </div>
        </div>
    </div>

    <!-- 添加字段模态框 -->
    <div class="modal fade" id="addColumnModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="bi bi-plus-circle me-2"></i>添加新字段</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form action="{{ url_for('sqlmanager_bp.add_column', table_name=table_name) }}" method="post">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">字段名</label>
                            <input type="text" class="form-control" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">数据类型</label>
                            <select class="form-select" name="type" required>
                                <option value="INTEGER">INTEGER (整数)</option>
                                <option value="STRING(50)">STRING(50) (字符串)</option>
                                <option value="BOOLEAN">BOOLEAN (布尔值)</option>
                                <option value="DATETIME">DATETIME (日期时间)</option>
                                <option value="FLOAT">FLOAT (浮点数)</option>
                            </select>
                        </div>
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" name="nullable" checked>
                            <label class="form-check-label">允许为空</label>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">默认值（可选）</label>
                            <input type="text" class="form-control" name="default" placeholder="如：0、'默认值'">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-success">确认添加</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 修改字段模态框 -->
    <div class="modal fade" id="modifyColumnModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="bi bi-pencil me-2"></i>修改字段</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="modifyColumnForm" method="post">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">字段名</label>
                            <input type="text" class="form-control" id="modifyColumnName" readonly>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">数据类型</label>
                            <input type="text" class="form-control" id="modifyColumnType" readonly>
                            <small class="text-muted">提示：字段类型修改受数据库限制，此处不可编辑</small>
                        </div>
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="modifyColumnNullable" name="nullable">
                            <label class="form-check-label">允许为空</label>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">默认值（可选）</label>
                            <input type="text" class="form-control" name="default" placeholder="如：0、'默认值'">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary">确认修改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

     <script src="/Style/js/bootstrap.bundle.min.js"></script>
    <script>
        // 初始化修改字段模态框
        const modifyModal = new bootstrap.Modal(document.getElementById('modifyColumnModal'));
        const modifyForm = document.getElementById('modifyColumnForm');

        document.addEventListener('click', function(e) {
            if (e.target.closest('[data-bs-target="#modifyColumnModal"]')) {
                const btn = e.target.closest('[data-bs-target="#modifyColumnModal"]');
                const colName = btn.getAttribute('data-column-name');
                const colType = btn.getAttribute('data-column-type');
                const nullable = btn.getAttribute('data-nullable') === 'true';

                // 填充表单
                document.getElementById('modifyColumnName').value = colName;
                document.getElementById('modifyColumnType').value = colType;
                document.getElementById('modifyColumnNullable').checked = nullable;

                // 设置表单提交地址
                modifyForm.action = `{{ url_for('sqlmanager_bp.modify_column', table_name=table_name, column_name='') }}${colName}`;
            }
        });
    </script>
</body>
</html>